[JS102] npm, Jest, ES6 &[ALG101]

npm (Node Package Manager)

Node.js預設的、用JavaScript編寫的軟體套件管理系統。

1. 安裝:
   $ npm init (產生npm資料夾 & package.json 用來儲存npm資訊)
   $ npm install XXXX --save-dev ( 儲存npm資訊, 若之後要上傳github or others 不用整個modules都上傳。dev主要是開發時會用到的 但正式版本不會)

   如果有別人的package.json 可直接輸入 npm install, 就會根據package.json裡的dependencies下載package

2. npm script:
   可寫好一些指令用於npm, ex: 在package.json的script寫下 "start" : "node index.js", 接著 執行 npm run start, 就會執行 node index.js。可用於當檔案很多時得提醒

3. yarn :
   新的npm

Jest

var repeat = require('./index')

describe('測試 repeat', function() {
test('a重複5次應該要等於aaaaa', function() {
    expect(repeat('a', 5)).toBe('aaaaa');
});


test('fuck重複2次應該要等於fuckfuck', function() {
    expect(repeat('fuck', 2)).toBe('fuckfuck');
});

test(' 重複10次應該要等於', function() {
    expect(repeat('', 10)).toBe('');
});

})

TDD Test-driven Development 測試驅動開發

先寫測試 在寫程式

ES6 (ES2015)

ECMAScript : 標準 規範

let const 宣告變數新選擇

const : constant 常數 (這個數字不會變)

const b = 15
b = 20
<- error 

const b = {
    number : 15
}
b.number = 20 
<- OK

let
作用域 (scope) : 能成功使用的範圍
let, const : 宣告的變數只能在該作用域能使用
var : 宣告的變數能在全域使用
盡量使用let (宣告的範圍越小, 越不易干擾其他句子)

Template Literals

多行字串

let str = `
hey
hi
hello
`

字串內加變數

function sayHi(name){
    console.log(`hello, ${name.toUpperCase()} now is ${new Date()}`)
}
${} 可放js的function

Destructuring 解構

ex1:
const arr = [1,2,3,4]
let [firsr, second, third, forth] = arr
(上面等於:
let first = arr[0] 
let second = arr[1]
ex2:
const obj = {
    name : 'nick',
    age : 30,
    address : 'taiwan'
    phone : {
        home : 12345
    }
}
let {name, age, address} = obj //obj裡的名稱要等於外面的名稱
let(phone) = obj
let(home) = phone
也可寫成
let (phone : {home}) = obj
console.log(address)
ex3:
function(test{a,b}){
    console.log(a)
}
test({
    a : 1,
    b : 2
})

Spread Operator

ex1:
let arr = [1,2,3]
let arr2 = [4,5,6, ...arr]
console.log(arr2) -> [1,2,3,4,5,6]
ex2:
let obj1 = {
    a : 1,
    b : 2
}

let obj2 = {
    z : 1
}
let  obj3 = {
    ...obj1,
    c : 3
 }
 console.log(obj3)
 ex3: 也可用來複製值
 let nesteArray = [4]
 let arr = [1,2,3,nesteArray]
 let arr2 = [...arr]

Rest Paramenters 反向的展開

常配合解構使用

ex1:
let arr = [1,2,3,4]
let [first, second] = arr
可改寫成 =>
let [first, ...rest] = arr //console.log(...rest) -> [2,3,4]
ex2:
let obj = {
     a = 1,
     b = 2,
     c = 3
 }
 let {a, ...obj2} = obj
 ex3:
 let obj = {
     a = 1,
     b = 2,
 }
 let obj2 = {
     ...obj
     c : 3
 }
  let {a, ...rest} = obj
 let {a, ...obj2} = obj
 ex4:
 function add(a, ...args){
     return a + args[0]
 console.log(add(1,2))

加上預設值 Default Parameters

function repeat(str, times = 5) { // =5為預設值
    return str.repeat(times)
}

ex1:
const obj = {
    b : 2
}
const {a = 123, b} = obj // =123為預設值

箭頭函式 Arroe Function

function test(n) {
    return n
}
const test = n => {
    return n
}
ex1:
let arr = [1,2,3,4,5]
console.log(
    arr
        .filter(value => return value >1)
        .map(value => {
            return value*2
        })
)

Import Export

ES5 export & require
ES6 export & import{}

export function add (a,b) {
    return a+b
}
另一個檔案
import {add} from './utlis'
but 
node.js 還沒支援import
因此要用babel
-----------
另一個export方法:
function add(a,b){
    return a+b
}
export {
    add as addFunction // as改名稱
}
import 全部:
import * as utlis from './utlis'
---------------
export default:
export default function add (a,b) {
    return a+b
}
import add from './utlis'

Babel

如果想用某個東西但還沒被支援，用Babel轉成舊語法
ES6/7/8 => Babel => ES5 or更舊
babel node

安裝
npm install --save-dev @babel/core @babel/node
@babel/preset-env
touch .babelrc
在檔案裡輸入
{
    "presets" : ["@babel/preset-env"]
}
npx babel-node index.js